<template>
    <el-container>
        <el-header>
            <Header/>
        </el-header>

        <el-main class="content">
            <el-row class="content1">
                <el-col :span="5">
                    <div class="show">
                        <div class="lidiv" v-show="flag1">
<!--                            <img src="1.jpg" height="400" width="772"/>-->
                            <ul>
                                <li>就这</li>
                            </ul>
                        </div>
                        <div class="lidiv" v-show="flag2">
                            <img src="2.jpg" height="400" width="772"/>
                        </div>
                        <div class="lidiv" v-show="flag3">
                            <img src="何昊天.png" height="400" width="772"/>
                        </div>
                    </div>

                    <div class="grid">
                        <ul class="ul">
                            <li @mouseover="flag1=true" @mouseout="flag1=false">前沿/区块链/人工智能</li>
                            <li @mouseover="flag2=true" @mouseout="flag2=false">前端/小程序/JS</li>
                            <li @mouseover="flag3=true" @mouseout="flag3=false">后端/JAVA/Python</li>
                            <li @mouseover="flag4=true" @mouseout="flag4=false">移动/Android/iOS</li>
                            <li @mouseover="flag5=true" @mouseout="flag5=false">云计算/大数据/容器</li>
                            <li @mouseover="flag6=true" @mouseout="flag6=false">运维/测试/数据库</li>
                            <li @mouseover="flag7=true" @mouseout="flag7=false">UI设计/3D动画/游戏</li>
                        </ul>
                    </div>
                </el-col>
                <el-col :span="19">
                    <div class="grid">
                        <div class="block">
                            <el-carousel trigger="click" height="450px">
                                <el-carousel-item>
                                    <img src="星空.jpg" height="400px" width="1100px"/>
                                </el-carousel-item>
                                <el-carousel-item>
                                    <img src="2.jpg" height="400px" width="1100px"/>
                                </el-carousel-item>
                                <el-carousel-item>
                                    <img src="何昊天.png" height="400px" width="1100px"/>
                                </el-carousel-item>
                            </el-carousel>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <h1>零基础就业</h1>
            <el-row :gutter="20">
                <div class="content2">
                    <el-col :span="6">
                        <img src="1.jpg" height="60"/></el-col>
                    <el-col :span="6">
                        <img src="2.jpg" height="60"/></el-col>
                    <el-col :span="6">
                        <img src="星空.jpg" height="60"/></el-col>
                    <el-col :span="6">
                        <img src="马云.png" height="60"/></el-col>
                </div>
            </el-row>
            <el-row>
                <el-table
                        :data="tableData2"
                        border
                        >
                    <el-table-column
                        prop="id"
                        label="编号"
                        width="180"
                        align="center">
                    </el-table-column>
                    <el-table-column
                            prop="date"
                            label="日期"
                            width="180"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="姓名"
                            width="180"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="address"
                            label="地址"
                            align="center">
                    </el-table-column>
                  <el-table-column label="操作" >
                    <template slot-scope="scope">
                      <el-button
                              size="mini"
                              @click="showEdit(scope.row)"
                              id="bj"
                              type="primary"
                              >编辑</el-button>
                        <el-dialog title="修改栏" :visible.sync="dialogFormVisible">
                            <el-form :model="form">
                                <el-form-item label="日期" :label-width="formLabelWidth">
                                    <el-input v-model="form.date" autocomplete="off" placeholder="请输入行日期">
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="姓名" :label-width="formLabelWidth">
                                    <el-input v-model="form.name" placeholder="请输入新名字">
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="地址" :label-width="formLabelWidth">
                                    <el-input v-model="form.address" placeholder="请输入新地址">
                                    </el-input>
                                </el-form-item>
                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <el-button @click="dialogFormVisible = false">取 消</el-button>
                                <el-button type="primary" @click="sure">确 定</el-button>
                            </div>
                        </el-dialog>



                      <el-button
                              size="mini"
                              type="danger"
                              @click="del(scope.$index)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table >
            </el-row>

            <el-pagination
                    background
                    layout="prev, pager, next"
                    :page-count="page"
                     align="center"
                    @current-change="select"
                        >
            </el-pagination>
        </el-main>
        <el-footer>Footer</el-footer>
    </el-container>
</template>
<!-- @click="handleEdit(scope.$index)"-->
<style scoped>
    .el-button--mini, .el-button--mini.is-round {
        padding: 7px 15px;
        margin: 10px;
    }
    .lidiv ul li{
        background-color: pink;
    }

    .el-header, .el-footer {
        /*background-color: #B3C0D1;*/
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    /*.el-main {
      background-color: #E9EEF3;
      color: #333;
      text-align: center;
      line-height: 160px;
    }*/

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }

    /*.grid-content bg-purple{
      background-color: #42b983;
    }*/
    .linkdiv a {
        margin: auto 1%;
        color: #333333;
    }

    .linkdiv a:nth-of-type(1) {
        margin-left: -60px;
    }

    .content {
        background-color: #DFF0A4;
        position: relative;
        padding: 20px 100px;
    }

    .content1 .grid {
        height: 400px;
        background-color: #2B333B;
    }

    .content .el-row {
        overflow: hidden;
        border-radius: 20px;
        box-shadow: 0 0 50px #D0D2D4;
    }

    .login1 {
        position: absolute;
        right: 30px;
    }

    .ul {
        list-style: none;
        margin-top: 0;
        padding-left: 10%;
        color: #F5FFE9;
    }

    .ul li {
        height: 55px;
        font-size: 18px;
        line-height: 60px;
    }

    .lidiv {
        float: left;
    }

    .show {
        position: absolute;
        left: 250px;
        top: 0;
        z-index: 9;
    }

    .content2 img {
        border-radius: 10px;
        margin-left: 30px;
    }

    .content2 img:hover {
        box-shadow: 0 0 10px #ddd;
        /*transform 图片变形  transition 变形时间*/
        transform: scale(1.1);
        transition: 1000ms;
    }
</style>

<script>
    import $ from "jquery"
   import Header from "../components/Header";
         // let a=0;


    export default {
        components: {Header},
        comments:{
            Header
        },
        data() {
            return {
                input: "",
                time:"",
                flag1: false,
                flag2: false,
                flag3: false,
                flag4: false,
                flag5: false,
                flag6: false,
                flag7: false,
                dialogVisible: false,
                dialogTableVisible: false,
                dialogFormVisible: false,



                tableData: [{
                    id:1,
                    date: '2016-05-03',
                    name: '王小虎1',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    id:2,
                    date: '2016-05-02',
                    name: '王小虎2',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    id:3,
                    date: '2016-05-04',
                    name: '王小虎3',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    id:4,
                    date: '2016-05-01',
                    name: '王小虎4',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    id:5,
                    date: '2016-05-08',
                    name: '王小虎5',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    id:6,
                    date: '2016-05-06',
                    name: '王小虎6',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    id:7,
                    date: '2016-05-07',
                    name: '王小虎7',
                    address: '上海市普陀区金沙江路 1518 弄'
                }],
                form: {
                    name: '',
                    region: '',
                    date: '',
                    date2: '',
                    address:'',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                },

                formLabelWidth: '120px',
                tableData2:[],
                page:1,
                pageSize:5
            }
        },

        created() {
            this.page=Math.floor((this.tableData.length+this.pageSize-1)/this.pageSize)
            this.select('1');
        },
        methods: {

            showEdit(row){
                 // a=i
                this.dialogFormVisible = true
                // this.tableData[i].date=prompt("请输入日期");
                // this.tableData[i].name=prompt('请输入名字');
                // this.tableData[i].address=prompt('请输入地址');
                // console.log(this.form.name)
                // console.log(i)
                console.log($)
                this.form=Object.assign({},row);

            },
            sure(){
                // this.tableData2[a].date=this.form.date1
                // this.tableData2[a].name=this.form.name
                // this.tableData2[a].address=this.form.resource
                this.tableData2.forEach((item)=>{
                    console.log(this.form)
                    if(item.id==this.form.id){
                        console.log(item.address)
                        console.log(item.date)
                        console.log(this.form.resource)

                        item.name=this.form.name
                        item.address=this.form.address
                        item.date=this.form.date;
                        return;
                    }
                })
                this.dialogFormVisible = false

            },




            select(cur){
                console.log(cur);
                // let param={page:cur,pageSize:this.pageSize}
                // this.axios.get("http://192.168.0.109:6106/api/test-user/loadList.do",{params:param}).then((res)=>{
                    // this.tableData2=res.data.rows
                    let i=(cur-1)*this.pageSize;
                    this.tableData2= this.tableData.slice(i,i+this.pageSize)
                    // this.page=Math.floor((res.data.total+this.pageSize-1)/this.pageSize);


                // });

            },
            del(i){
                this.tableData2.splice(i,1)
                //删除成功后，一定要刷新表格
            }
        },
    };
</script>
